<template>
    <!-- 监控 Monitor mon brief view of main -->
    <div class="brief-view-content" @click="drill">
        <div class="brief-view-title">监控</div>
        <div class="row g-5 justify-content-between data-views">
            <div class="col-6">
                <div class="row justify-content-end data data-left">
                    <div class="col-12 title">异常用户行为</div>
                    <div class="col-8">
                        <div class="number">
                            {{data1}}<span class="unit">条</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row justify-content-end data data-left">
                    <div class="col-12 title">异常用电记录</div>
                    <div class="col-8">
                        <div class="number">
                            {{data2}}<span class="unit">条</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row justify-content-end data data-left">
                    <div class="col-12 title">用户使用记录</div>
                    <div class="col-8">
                        <div class="number">
                            {{data3}}<span class="unit">条</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row justify-content-end data data-left">
                    <div class="col-12 title">交易用电量</div>
                    <div class="col-8">
                        <div class="number">
                            {{data4}}<span class="unit">KWM</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TWEEN from "@tweenjs/tween.js";

    export default {
        name: "BriefViewMonitor",
        data() {
            return {
                data1: 500,
                data2: 2531,
                data3: 8514,
                data4: 9448,
                num1: 0,
                num2: 0,
                num3: 0,
                num4: 0
            }
        },
        mounted() {

            this.num1 = Number(this.data1);
            this.num2 = Number(this.data2);
            this.num3 = Number(this.data3);
            this.num4 = Number(this.data4);
        },
        watch: {
            num1(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.data1 = tween.number.toFixed(0)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            },
            num2(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.data2 = tween.number.toFixed(0)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            },
            num3(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.data3 = tween.number.toFixed(0)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            },
            num4(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.data4 = tween.number.toFixed(0)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            }
        },
        methods: {
            drill() {
                this.$router.push({name: "main-monitor-page"})
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/sass/init";
    .brief-view-content {
        cursor: pointer;
        .brief-view-title {
            bottom: $brief-view-padding;
            right: $brief-view-padding;
        }
        .data-views {
            padding: $brief-view-padding;
            width: $view-xs-width - $brief-view-padding * 2;
            .data {
                height: 180px;
                background-repeat: no-repeat;
                background-size: 100% 100%;

                .title {
                    color: white;
                    text-align: center;
                    font-family: stencilstd, "微软雅黑", serif;
                    font-size: $font-size-base * 3;
                }

                .number {
                    font-family: stencilstd, "微软雅黑", serif;
                    font-size: $font-size-base * 4;
                    background-image: -webkit-linear-gradient(#00ffff, #ffffff);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    .unit {
                        font-size: $font-size-base * 2;
                    }
                }
            }
            .data-left {
                background-image: url("/media/main/monitor/bg-1.png");
            }
            .data-right {
                background-image: url("/media/main/monitor/bg-2.png");
            }
        }
    }
</style>